@container: container;

@columns-name: col;
@columns-padding: 15px;
@grid-count: 24;


@screen-sm-min: 768px;
@screen-md-min: 992px;
@screen-lg-min: 1200px;



.@{container},
.@{container}-fluid {
  padding-left: @columns-padding;
  padding-right: @columns-padding;
  margin-right: auto;
  margin-left: auto;
  min-width: 960px;/*为了兼容不支持媒体选择的浏览器*/

  transition: width 0.5s cubic-bezier(1,-0.02, 0, 1.04);
  box-sizing: border-box;
}

.@{container}-fluid {
  min-width: 0;
  width: 100%;
}

.row {
  min-height: 1px;
  margin-left: -@columns-padding;
  margin-right: -@columns-padding;
  clear: both;
  &::before,
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

// 列基础css
.columns-base-css() {
  position: relative;
  min-height: 1px;
  padding-right: @columns-padding;
  padding-left: @columns-padding;

  box-sizing:border-box;
}
// 循环列，设置基础css
.make-grid-columns(@len: @grid-count) {
  .col(@i, @list) when (@i =< @len) {
    @classList: ~".@{columns-name}-@{i},.@{columns-name}-xs-@{i},.@{columns-name}-sm-@{i},.@{columns-name}-md-@{i},.@{columns-name}-lg-@{i}";
    .col(@i + 1, ~"@{classList},@{list}");
  }
  .col(@i, @list) when (@i > @len) {
    @{list} {
      .columns-base-css();
    }
  }
  .col(1, ~"")
}

.make-grid-columns(@grid-count);

.make-column(@columns-name, @i) {
  @classList: ~".@{columns-name}-@{i},.@{columns-name}-xs-@{i},.@{columns-name}-sm-@{i},.@{columns-name}-md-@{i},.@{columns-name}-lg-@{i}";
  @{classList} {
    width: calc(~"@{i} / @{grid-count} * 100%");
    float: left;
  }
}

.make-offset(@columns-name, @i) {
  @classList: ~".@{columns-name}-@{i},.@{columns-name}-xs-@{i},.@{columns-name}-sm-@{i},.@{columns-name}-md-@{i},.@{columns-name}-lg-@{i}";
  @{classList} {
    margin-left: calc(~"@{i} / @{n} * 100%");
  }
}

.make-pull(@columns-name, @i) {
  @classList: ~".@{columns-name}-@{i},.@{columns-name}-xs-@{i},.@{columns-name}-sm-@{i},.@{columns-name}-md-@{i},.@{columns-name}-lg-@{i}";
  @{classList} {
    margin-left: calc(~"@{i} / @{n} * 100%");
  }
}

.make-push(@columns-name, @i) {
  @classList: ~".@{columns-name}-@{i},.@{columns-name}-xs-@{i},.@{columns-name}-sm-@{i},.@{columns-name}-md-@{i},.@{columns-name}-lg-@{i}";
  @{classList} {
    margin-left: calc(~"@{i} / @{n} * 100%");
  }
}

// 循环生成列
.make-columns-loop(@col-class-name, @n, @i: 1) when (@i <= @n) {
  // .@{col-class-name}-@{i} {
  //   @number: 1 * (@i / @n);
  //   width: calc(~"@{i} / @{n} * 100%");
  //   float: left;
  // }
  .make-column(@col-class-name, @i);
  // 偏移
  // .@{col-class-name}-offset-@{i}{
  //   margin-left: calc(~"@{i} / @{n} * 100%");
  // }
  .make-offset(~"@{col-class-name}-offset", @i);
  // 排序
  // .@{col-class-name}-pull-@{i}{
  //   right: calc(~"@{i} / @{n} * 100%");
  // }
  .make-offset(~"@{col-class-name}-pull", @i);
  // .@{col-class-name}-push-@{i}{
  //   left: calc(~"@{i} / @{n} * 100%");
  // }
  .make-push(~"@{col-class-name}-push", @i);

  .make-columns-loop(@col-class-name, @n, (@i + 1));
}

.make-columns(@type) when (@type = xs),(@type = sm),(@type = md),(@type = lg) {
  @col-class-name: ~"@{columns-name}-@{type}";
  .make-columns-loop(@col-class-name, @grid-count);
}
.make-columns() {
  .make-columns-loop(@columns-name, @grid-count);
}

.make-columns();
.make-columns(xs);

// 媒体查询
.@{container} {
  @media (max-width: @screen-sm-min) {
    min-width: 0;
  }
  @media (min-width: @screen-sm-min) {
    width: 750px;
    min-width: 0;
  }
  @media (min-width: @screen-md-min) {
    width: 970px;
    min-width: 0;
  }
  @media (min-width: @screen-lg-min) {
    width: 1170px;
    min-width: 0;
  }
}

// 媒体查询设置对应列类型css
@media (min-width: @screen-sm-min) {
  .make-columns-loop(sm, @grid-count);
}
@media (min-width: @screen-md-min) {
  .make-columns-loop(md, @grid-count);
}
@media (min-width: @screen-lg-min) {
  .make-columns-loop(lg, @grid-count);
}
